<template>
  <div class="p-2">
    <div v-if="uploadList.length < 1" class="p-5 text-center text-muted border rounded bg-light">
      没有附件
    </div>

    <attach-list v-loading="loading" :attath-data="uploadList"></attach-list>
  </div>
</template>

<script>
import { attachAdapter } from '@/bank/components/attach/index'
import { enumCompanyTags, enumPersonalTags, otherTag } from '@/bank/views/limit/attach'

import AttachList from '@/bank/components/attach/List'

export default {
  components: {
    AttachList,
  },
  props: {
    visible: Boolean,
    queryId: String,
    batchNo: [String, Array],
  },
  data() {
    return {
      tableName: 'datum_customer_attachment',
      loading: false,
      uploadList: [],
    }
  },
  computed: {
    queryData() {
      const { batchNo, queryId } = this
      const data = batchNo ? (Array.isArray(batchNo) ? batchNo : [batchNo]).filter(it => it) : []
      data.push(queryId)
      return data.join(',')
    },
    tagSet() {
      return new Set([...enumCompanyTags, ...enumPersonalTags])
    },
    uploadTags() {
      return [...this.tagSet]
    },
    sortObj() {
      return this.uploadTags.reduce((prev, curr, index) => {
        prev[curr] = index
        return prev
      }, {})
    },
  },
  watch: {
    visible: {
      handler: function () {
        if (this.visible) {
          this.getData()
        }
      },
      immediate: true,
    },
    queryData: {
      handler: function () {
        this.uploadList = []
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      if (!this.queryId) {
        return
      }

      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          { 'customer_related_id.in': this.queryData },
          { create_time: 'desc' }
        )
        .then(res => {
          const data = res?.data ?? []
          this.uploadList = []

          for (const attach of data) {
            const attachData = attachAdapter(attach)
            let { attachment_type: tag, customer_related_id: relatedId } = attach

            // 通用附件（关联id一样），按固定类型分类，分到不类的数据统一放到otherTag中
            if (relatedId === this.queryId && !this.tagSet.has(tag)) {
              tag = otherTag
            }

            let index = this.uploadList.findIndex(it => it.tag === tag)
            if (index < 0) {
              this.uploadList.push({
                tag,
                attachs: [attachData],
              })
            } else {
              this.uploadList[index].attachs.push(attachData)
            }
          }

          // 排序
          const { sortObj } = this
          const { length } = this.uploadList
          this.uploadList.sort((a, b) => {
            const an = sortObj[a.tag] ?? length
            const bn = sortObj[b.tag] ?? length
            return an - bn
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
